<template>
    <div class="manage-box">
        <header>
            项目权限管理
        </header>
        <div class="main-box">
            <div class="operation">
                <form class="operation-search-form" @submit.prevent="onSubmit">
                    <el-input placeholder="请输入项目名称" v-model="project_name">
                        <el-button slot="append" icon="el-icon-search" @click="onSubmit"></el-button>
                    </el-input>
                </form>
            </div>
            <el-table v-loading="loading" :data="project_list.td" v-if="project_list && project_list.th">
                <el-table-column  v-for="(item, index) in project_list.th" :key="index" :label="item.fieldName" :prop="item.fieldkey"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editProjectAuth(scope.row.id)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-if="project_list" @current-change="handleCurrentChange" background :current-page="1" page-size="10" prev-text="上一页" next-text="下一页" 
            layout="total, prev, pager, next, jumper" :total="project_list.total"></el-pagination>
        </div>

        <edit-dialog :project_id="id" :is_edit_project_auth.sync="is_edit_project_auth"></edit-dialog>
    </div>
</template>

<script>
import {
    getProjectList
} from "@/api/project_auth.js";

import EditDialog from './edit.vue';

export default {
    name: "project-auth-manage",
    components: {
        EditDialog
    },
    data() {
        return {
            project_name: undefined,
            project_list: undefined,
            id: undefined,
            is_edit_project_auth: false,
            loading: true
        };
    },
    methods: {
        onSubmit() {
            console.log(this.project_name);
        },
        getProjectList(val) {
            console.log(this.loading)
            getProjectList({ pageNumber: val })
                .then(res => {
                    this.project_list = res;
                    this.loading = false;
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },
        editProjectAuth(id) {
            this.id = id;
            this.is_edit_project_auth = true;
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.getProjectList(val);
        }
    },
    mounted() {
        this.getProjectList();
    }
};
</script>

<style>
</style>
